<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">

        <!-- bootstrap -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

        <link rel="stylesheet" href="./css/index.css">

        <!-- jquery -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    </head>
    <body class="app-container">
        
        <div class="container">
            
            <div class="panel panel-default">
                <div class="panel-body">
                    <!-- 用户登录输入界面 -->
                    <legend>用户登录</legend>
                
                    <div class="form-group">
                        <label for="">用户名</label>
                        <input type="text" class="form-control" id="userId" placeholder="请输入用户名">
                    </div>
                
                    <div class="form-group">
                        <label for="">用户密码</label>
                        <input type="password" class="form-control" id="userPwd" placeholder="请输入用户密码">
                    </div>
                
                    <button type="submit" onclick="submitEvt()" class="btn btn-primary">登录</button>
                   
                </div>
            </div>
            
        </div>
        <script>
            function submitEvt() {
                // 获取用户输入数据
                var userId = $('#userId').val(),
                    userPwd = $('#userPwd').val();

                // 判断用户是否输入用户名
                if (!userId) {
                    alert('请输入用户名，再提交');
                    return;
                }

                // 判断用户是否输入用户密码
                if (!userPwd) {
                    alert('请输入用户密码，再提交');
                    return;
                }

                // 数据提交
                $.ajax({
                    url: '/user/login',
                    type: 'POST',
                    data: {userId: userId, userPwd: userPwd},
                    success: function(data) {
                        if (data.code === 200) {
                            alert('登录成功');
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function(e) {
                        alert('登录错误，请重试');
                        console.log(e);
                    }
                })
            }
        </script>
    </body>
</html>